<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <#assign base=request.contextPath  />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${base}/static/win10/component/layui/css/layui.css" media="all">
    <script src="${base}/static/win10/js/jquery-1.8.3.min.js?t=1"></script>
    <link rel="stylesheet" href="${base}/static/win10/css/ztree/metroStyle/metroStyle.css" type="text/css">
    <link rel="stylesheet" href="${base}/static/win10/css/ztree/demo.css?t=2" type="text/css">
    <script type="text/javascript" src="${base}/static/win10/js/jquery.ztree.all.js"></script>
</head>
<body>
<script>
var base="${base}";
</script>
<form class="layui-form " action=""  >
    <label class="layui-form-label">节点：</label>
    <div class="layui-input-block">
        <input type="text" id="Name" name="title" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
    </div>
    </br>
    <div class="layui-form-item">
        <div class="layui-btn-group"  >
            <button type="button" class="layui-btn" id="add"  >增加</button>
            <button type="button" class="layui-btn " id="edit">编辑</button>
            <button type="button" class="layui-btn" id="del">删除</button>
            <button type="button" class="layui-btn"  id="serch">
                <i class="layui-icon layui-icon-search">搜索</i>
            </button>
        </div>
    </div>
</form>

    <ul id="tree" class="ztree"></ul>

<script src="${base}/static/win10/component/layui/layui.js?t=1"></script>

<script>

    layui.use('tree', function () {
 
        var treeObj;
        var setting = {
            async: {
                enable: true,
                url: base + "/admin/dictionaries/finDictionariesAjax",
                dataFilter: ajaxDataFilter
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            view: {
                expandSpeed: "normal"
            },
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            }
        };
        initTree();
        function initTree() {
            treeObj =  $.fn.zTree.init($("#tree"), setting  );
        }

        /**
         * 解析 正常响应的数据
         * @param treeId
         * @param parentNode
         * @param responseData
         * @returns {*}
         */
        function ajaxDataFilter(treeId, parentNode, responseData) {
            if(responseData.code===10000){
                return responseData.data;
            }else{
                layer.msg(responseData.msg)
            }
        }
        $("#add").on("click",function () {
            if(getTreeDataId()==null||getTreeDataId()===""){
                layer.msg("请选择一个节点操作")
                return;
            }
            addOpen(getTreeDataId())
        });
        $("#edit").on("click",function () {


            if(getTreeDataId()==null||getTreeDataId()===""){
                layer.msg("请选择一个节点操作")
                return;
            }
            editOpen(getTreeDataId())
        });

        $("#del").on("click",function () {
            if(getTreeDataId()==null||getTreeDataId()===""){
                layer.msg("请选择一个节点操作")
                return;
            }
            layer.confirm('确定删除该节点？', {
                btn: ['确定', '取消' ] //可以无限个按钮
                ,btn1: function(index, layero){
                    delData(getTreeDataId())
                }
            }  );


        });
        $("#serch").on("click",function () {
            setting.async.otherParam={name:$("#Name").val()}
            treeObj =  $.fn.zTree.init($("#tree"), setting  );
        });

        //添加字典表弹窗
        function addOpen(id){
            layer.open({
                type: 2,
                title: false,
                area: ['330px', '139px'],
                content: base + "/admin/dictionaries/addTree.html" //这里content是一个普通的String
                , success: function (layero, index) {
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    iframeWin.$("#pId").val(id);
                    iframeWin.$("#subm").on("click", function () {
                        var formData = {
                            parentId: iframeWin.$("#pId").val(),
                            name: iframeWin.$("#Name").val(),
                            value: iframeWin.$("#Value").val()
                        };
                        insertOrUpdateAjax(formData)
                    })
                }
            });
        }

        //编辑字典表弹窗
        function editOpen(id){
            layer.open({
                type: 2,
                title: false,
                area: ['330px', '139px'],
                content: base + "/admin/dictionaries/editTree.html?id="+id //这里content是一个普通的String
                , success: function (layero, index) {
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    iframeWin.$("#subm").on("click", function () {
                        var formData = {
                            id: iframeWin.$("#id").val(),
                            name: iframeWin.$("#Name").val(),
                            value: iframeWin.$("#Value").val()
                        };
                        insertOrUpdateAjax(formData)
                    })
                }
            });
        }

//获取ztree选中点id
        function getTreeDataId() {
            var nodes=treeObj.getCheckedNodes(true);
            var dataR="";
            for(var i=0;i<nodes.length;i++){
                dataR+=","+nodes[i].id; //获取选中节点的值
            }
            return dataR.substr(1,dataR.length-1);
        }

        function insertOrUpdateAjax(formData) {
            $.ajax({
                type: "GET",
                url: base + "/admin/dictionaries/insertOrupdateTree",
                data: formData,
                success: function (data) {
                    layer.closeAll();
                    layer.msg(data.message);
                    if (data.code === 10000) {
                        treeObj.reAsyncChildNodes(null, "refresh");
                    } else {

                    }
                }
            });
        }
        function delData(id) {
            $.ajax({
                type: "GET",
                url: base + "/admin/dictionaries/delData",
                data: {id:id},
                success: function (data) {
                    layer.msg(data.message);
                    if (data.code === 10000) {
                        treeObj.reAsyncChildNodes(null, "refresh");
                    } else {

                    }
                }
            });
        }
    });
</script>
</body>
</html>